import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableWithoutFeedback,
  Image,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import React, {useState} from 'react';
import {RecommendationNavigationProp} from '../../types';
import {BottomSheet} from '@rneui/themed';

const Hot = () => {
  const navigation = useNavigation<RecommendationNavigationProp>();
  const [isVisible, setIsVisible] = useState(false);
  const list = [];
  for (let i = 0; i < 50; i++) {
    list.push({
      key: i,
    });
  }
  return (
    <>
      {list.map(item => (
        <View key={item.key} style={styles.item}>
          <TouchableWithoutFeedback
            onPress={() => {
              navigation.navigate('PlayVideo', {id: item.key});
            }}>
            <View>
              <Image
                style={{width: '100%'}}
                source={require('../../assets/img/11.png')}></Image>
              <View
                style={{
                  paddingTop: 10,
                  paddingBottom: 10,
                  paddingLeft: 5,
                  paddingRight: 5,
                }}>
                <Text>title{item.key}</Text>
              </View>
            </View>
          </TouchableWithoutFeedback>

          <View
            style={{
              paddingBottom: 10,
              paddingLeft: 5,
              paddingRight: 5,
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <TouchableWithoutFeedback
              onPress={() => {
                navigation.navigate('My');
              }}>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <View
                  style={{
                    width: 15,
                    height: 15,
                    borderRadius: 4,
                    borderWidth: 1,
                    borderColor: 'gray',
                    borderStyle: 'solid',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginRight: 5,
                  }}>
                  <Text style={{color: 'gray', fontSize: 10}}>up</Text>
                </View>
                <Text style={{color: 'gray', fontSize: 12}}>
                  隧道费{item.key}
                </Text>
              </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback
              onPress={() => {
                setIsVisible(true);
              }}>
              <View style={{transform: [{rotate: '90deg'}]}}>
                <Text style={{fontWeight: 'bold'}}>···</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </View>
      ))}
      <BottomSheet
        isVisible={isVisible}
        scrollViewProps={{scrollsToTop: true}}
        onBackdropPress={() => {
          setIsVisible(false);
        }}>
        <View
          style={{
            backgroundColor: '#EBEEF5',
            paddingLeft: 20,
            paddingRight: 20,
            paddingBottom: 40,
          }}>
          <View style={{height: 10, alignItems: 'center', marginTop: 10}}>
            <View
              style={{
                height: 2,
                backgroundColor: '#333',
                width: 20,
                borderRadius: 2,
              }}></View>
          </View>
          <View style={{height: 40, backgroundColor: '#fff', borderRadius: 5}}>
            <Text style={{lineHeight: 40, color: '#303133'}}>
              添加至稍后再看
            </Text>
          </View>
          <View style={{flexDirection: 'row', marginTop: 15, marginBottom: 10}}>
            <Text style={{color: '#303133'}}>反馈</Text>
            <Text style={{color: '#909399', fontSize: 12}}>
              (选择后将优化此内容)
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
          </View>
          <View style={{flexDirection: 'row', marginTop: 15, marginBottom: 10}}>
            <Text style={{color: '#303133'}}>我不想看</Text>
            <Text style={{color: '#909399', fontSize: 12}}>
              (选择后将优化此内容)
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
            <View
              style={{
                height: 40,
                width: '49%',
                marginBottom: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
              }}>
              <Text style={{textAlign: 'center', lineHeight: 40}}>
                恐怖血腥
              </Text>
            </View>
          </View>
        </View>
      </BottomSheet>
    </>
  );
};

export default Hot;

const styles = StyleSheet.create({
  item: {
    width: '47%',
    textAlign: 'center',
    marginBottom: 10,
    marginLeft: '2%',
    borderRadius: 5,
    backgroundColor: '#ffffff',
    shadowColor: '#333',
  },
});
